import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import { Action } from 'components';
import { http } from 'libs';
import store from './store';
import StudentForm from './Form';

@observer
class StudentTable extends React.Component {
  componentDidMount() {
    store.fetchRecords()
  }

  handleDelete = (text) => {
    Modal.confirm({
      title: '删除确认',
      content: `确定要删除学员【${text['name']}】?`,
      onOk: () => {
        return http.delete(`/api/student/${text.id}/`)
          .then(() => {
            message.success('删除成功');
            store.fetchRecords()
          })
      }
    })
  };

  render() {
    let data = store.records;
    if (store.f_name) {
      data = data.filter(x => x['name'].includes(store.f_name))
    }
    if (store.f_parent_phone) {
      data = data.filter(x => x['parent_phone'].includes(store.f_parent_phone))
    }

    return (
      <React.Fragment>
        <Table
          rowKey="id"
          loading={store.isFetching}
          dataSource={data}
          pagination={false}>
          <Table.Column title="学员姓名" dataIndex="name"/>
          <Table.Column title="性别" dataIndex="gender_alias"/>
          <Table.Column title="身份证号" dataIndex="id_card"/>
          <Table.Column title="家长姓名" dataIndex="parent_name"/>
          <Table.Column title="家长电话" dataIndex="parent_phone"/>
          <Table.Column title="就读学校" dataIndex="school"/>
          <Table.Column title="年级" dataIndex="grade"/>
          <Table.Column title="操作" render={info => (
            <Action>
              <Action.Button auth="student.student.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
              <Action.Button auth="student.student.del" danger onClick={() => this.handleDelete(info)}>删除</Action.Button>
            </Action>
          )}/>
        </Table>
        {store.formVisible && <StudentForm/>}
      </React.Fragment>
    )
  }
}

export default StudentTable
